<template>
	<view>
		<view class="orderinfo">
			<view class="public-title">
				<text class="heng"></text><text class="title">订单信息</text>
			</view>
			<view class="infor">
				<text>订单编号：{{order.order_sn}}</text>
				<text>下单时间：{{$u.timeFormat(order.create_time,'yyyy-mm-dd hh:MM:ss')}}</text>
			</view>
		</view>
		
		<view class="orderinfo">
			<view class="public-title">
				<text class="heng"></text><text class="title">购物清单</text>
			</view>
			<view class="table">
				<text class="th" style="text-align: left;">商品名称</text>
				<text class="th" style="text-align: center;">商品数量</text>
				<text class="th" style="text-align: right;">商品价格</text>
			</view>
			<view class="table">
				<text class="td clamp1" style="text-align: left;">{{order.goods_name}}</text>
				<text class="td" style="text-align: center;">1</text>
				<text class="td" style="text-align: right;">￥{{order.price}}</text>
			</view>
			<view class="operation u-border-top">
				<view><text>商品总额</text><text class="price">￥{{order.price}}</text></view>
				<view><text>优惠券</text><text class="price">-￥{{order.coupon_amount}}</text></view>
			</view>
		</view>
		
		<view class="footer-box">
			<view>
				<text>实付款：</text>
				<text class="price">￥{{order.order_amount}}</text>
			</view>
			<text class="submit" @click="gopay">去支付</text>
		</view>
		
		
	</view>
</template>
<script>
	import pays from '@/utils/pay.js'
	export default {
		data() {
			return {
				userinfo:{},
				order:{}
			}
		},
		onLoad(options){
			this.$u.http.get("order/order/get",{order_sn:options.order_sn}).then(res => {
				this.order = res.data;
			})
		},
		onShow(){
			this.$u.api.getUserInfo().then(res => {
				this.userinfo = res.data;
			});
		},
		methods: {
			gopay(){
				if(!this.userinfo.thirdPartyUser){
					uni.getUserProfile({
						desc:"获取用户信息",
						success:res => {
							this.$u.api.bindwechat({
								data:res,
								success:LoginRes => {
									this.$u.api.getUserInfo().then(res => {
										this.userinfo = res.data;
										this.pay();
									});
								}
							});
						}
					})
				}else{
					this.pay();
				}
			},
			pay(){
				pays.pay({
					provider:"weixin",
					url:"plugin/wechat/pay",
					data:{
						user_id:this.userinfo.id,
						order_sn:this.order.order_sn
					},
					success:payRes => {
						if(payRes.errMsg == "requestPayment:ok"){
							uni.reLaunch({
								url:"/pages/index/index"
							})
						}
					},
					fail:payErr => {
						uni.reLaunch({
							url:"/pages/index/index"
						})
					}
				},this);
			}
		}
	}
</script>

<style lang="scss">
	.footer-box{
		.price{
			color: #ed3b0f;
		}
		.submit{
			background-color: #2e8bf0;
			color: #FFFFFF;
			width: 262rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			border-radius: 42rpx;
		}
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 126rpx;
		background-color: #FFFFFF;
		padding:0 32rpx;
		view{
			display: flex;
			flex-direction: row;
			font-weight: bold;
		}
	}
	
	.operation{
		margin-top: 32rpx;
		padding: 0 0 0 36rpx;
		view{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 32rpx;
		}
		text{
			font-size: 24rpx;
		}
		.price{
			font-weight: bold;
		}
	}
	.table{
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		padding:0 ;
		margin: 32rpx 0 0 36rpx;
		text{
			width: 33.33%;
			float: left;
			font-size: 22rpx;
			// display: flex; 
		}
		.th{
			font-size: 28rpx; font-weight: bold;
		}
	}
	.orderinfo{
		background-color: #FFFFFF;
		margin: 32rpx;
		padding: 32rpx;
		border-radius: 6rpx;
		.infor{
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			padding: 0 36rpx;
			text{
				 margin-top: 24rpx;
				 color: #626876;
			}
		}
	}
	.public-title{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.heng{
			height: 44rpx;
			width: 12rpx;
			background-color: #2e8bf0;
			border-radius: 6rpx;
			margin-right: 24rpx;
		}
		.title{
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	.orderinfo{
		display: flex;
		flex-direction: column;
	}
</style>
